<template>
  <view class="invite_wrap freeStore_shareQrCode">
    <view class="freeStoreCont" style="height: 80%">
      <swiper class="card-swiper" :indicator-dots="false" :circular="true"
       :autoplay="false" interval="5000" duration="500" @change="cardSwiper" indicator-color="#8799a3"
       indicator-active-color="#0081ff" >
        <swiper-item v-for="(item,index) in swiperList" :key="index" :class="curSwiperIndex==index?'cur':''">
          <view class="swiper-item">
             <qrcode :val="path" :canvasId="'share_invite_qrcode' + index" :bgImage="item.imageUrl" @updateQRCodeUrl="updateQRCodeUrl" v-if="!item.qrcodeUrl && path" :index="index"></qrcode>
             <image :src="item.qrcodeUrl" mode="aspectFit" v-if="item.qrcodeUrl" class="qrcode_img"></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="explain">
     <view class="step1">
        <view class="text1">长按保存发送图片</view>
        <view class="text2">使用方式</view>
      </view>
      <view class="step2">
        <view class="box">
          <view class="icon">
            <image class="img" src="/static/image/freeStore/zf.png"></image>
          </view>
          <view class="line"></view>
          <view class="icon">
            <image class="img" src="/static/image/freeStore/sys.png"></image>
          </view>
          <view class="line"></view>
          <view class="icon">
            <image class="img" src="/static/image/freeStore/tj.png"></image>
          </view>
        </view>
        <view class="box">
          <view class="width">保存</view>
          <view class="line none"></view>
          <view class="width">扫描二维码</view>
          <view class="line none"></view>
          <view class="width">提交入驻信息</view>
        </view>
        <!-- <view class="time" style="background-image: url(/static/image/freeStore/bot.png);">
          <view class="info" v-if="places">
            <view class="user">
              <view class="text3">已使用名额</view>
              <view class="text4">{{places.totalNumber - places.residueNumber}}<text class="sm">人</text></view>
            </view>
            <view class="user">
              <view class="text3">未使用名额</view>
              <view class="text4">{{places.residueNumber}}<text class="sm">人</text></view>
            </view>
          </view>
          <view class="btn" @click="checkList">查看使用名额</view>
        </view> -->
      </view>
    </view>
    
   <tki-qrcode class="tkiQrcode" ref="qrcode" :val="val" unit="upx" :icon="icon" :size="260" :onval="true" :loadMake="true" :showLoading="false" @result="qrR"/>
  </view>
</template>
<script>
import qrcode from './invite_code.vue'
import { PersonalCenter } from '@/service/user/user.service.js'
import { bannerFind } from "@/service/purchaseShop/purchaseShop.service.js"
import { getFreeStoreNumberApi } from "@/service/freeStore/freeStore.servies.js"
import tkiQrcode from '@/components/tki-qrcode/tki-qrcode.vue'
import { setSafeAreaSize } from '@/mixin/index.mixin.js'
export default {
  mixins: [setSafeAreaSize],
  components: {
    qrcode,
    tkiQrcode
  },
  data () {
    return {
      qrcodeUrl: '',
      curSwiperIndex: 0,
      swiperList: [],
      places: null,
      icon: this.$store.state.imgBaseUrl + '/logo_small.png',
      path: '',
      count: 0,
      scrollH: 0,
    }
  },
  computed: {
    val () {
      let url = window.location.origin + '/pages/freeStore/login';
      return `${url}?inviteId=${this.$store.state.userInfo.userId}`;
    }
  },
  
  mounted() {
    this.getBanner();
    this.getNumber();
  },
  methods: {
    cardSwiper (e) {
      this.curSwiperIndex = e.detail.current;
    },
    
    qrR (path) {
      if (path == '') {
        uni.showToast({
          title: '生成失败，请重试',
          icon: 'none'
        });
        return;
      }
      this.path = path;
    },
    getCurSwiperIndex (e) {
      this.curSwiperIndex = e.detail.current;
    },
    updateQRCodeUrl (obj) {
      this.count++;
      this.swiperList[obj.index].qrcodeUrl = obj.url;
      if (this.count == this.swiperList.length) {
        uni.hideLoading();
        // const query = uni.createSelectorQuery().in(this);
        // query.select('.qrcode_img').boundingClientRect(data => {
        //   this.scrollH = data.height;
        // }).exec();
      }
      
    },
    getBanner () {
      bannerFind({id: 8}, (res) => {
        res.data.forEach(item => {
          item.qrcodeUrl = null;
        });
        this.swiperList = res.data;
      })
    },
    getNumber () {
      getFreeStoreNumberApi({}, (res) => {
        if (res.status == 0) {
          this.places = res.data;
        }
      })
    },
    checkList () {
      uni.navigateTo({
        url: '/pages/freeStore/list'
      });
    }
  }
}
</script>

<style lang="scss" scope>
  @import "../../colorui/main.css";
  @import "../../colorui/icon.css";
  .card-swiper {
    height: 100% !important;
    uni-swiper-item {
      padding: 0;
    }
    .swiper-item image {
      pointer-events: all !important;
    }
  }
  .freeStoreCont {
    // background-color: green;
  }
  .scroll-style {
    // height: 738rpx;
    overflow-y: auto;
    // border: 1px solid red;
  }
  .layer {
    position: fixed;
    top: -99999upx;
    left: -99999upx;
    z-index: -99999;
  }
  .tkiQrcode {
    position: fixed;
    top: -99999upx;
    left: -99999upx;
    z-index: -99999;
  }
  .invite_wrap {
    width: 100%;
    height: 100vh;
    background:linear-gradient(0deg,rgba(234,234,234,1) 0%,rgba(255,255,255,1) 100%);
    position: relative;
    padding-top: 30rpx;
    .invite_content {
      width: 100%;
      // height: 100%;
      position: absolute;
      // top: 92rpx;
      top: 30rpx;
    }
    .tip {
      width: 100%;
      position: absolute;
      text-align: center;
      bottom: 60rpx;
      color: #FEF0CE;
      font-size: 40rpx;
      font-family: PingFang SC;
      font-weight: 500;
    }
    .explain {
      width: 100%;
      background-color: #FFFFFF;
      // margin-top: 30rpx;
      .step1 {
        // height: 30%;
        // background-color: red;
        background-color: #FFFFFF;
        padding-bottom: 23rpx;
        // border-top-left-radius: 50%;
        // border-top-right-radius: 50%;
        .text1 {
          text-align: center;
          font-size: 28rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(153,153,153,1);
          padding-top: 33rpx;
        }
        .text2 {
          font-size: 30rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(51,51,51,1);
          padding-top: 26rpx;
          padding-left: 33rpx;
        }
      }
      .step2 {
        // height: 65%;
        background-color: #FFFFFF;
        padding-bottom: 20rpx;
        .box {
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 20rpx;
          font-family: PingFang SC;
          font-weight: 500;
          color: rgba(254,114,103,1);
          .icon {
            width: 146rpx;
            .img {
              display: block;
              width: 65rpx;
              height: 66rpx;
              margin: 0 auto;
            }
          }
          .line {
            width: 77rpx;
            height: 2rpx;
            background: rgba(254,116,103,1);
            border-radius: 1px;
            &.none {
              height: 0;
            }
          }
          .width {
            width: 146rpx;
            text-align: center;
            margin-top: 12rpx;
          }
        }
        .time {
          width: 687rpx;
          // height: 190rpx;
          margin: 0 auto;
          padding: 0 0 20rpx;
          background-repeat: no-repeat;
          background-size: 100% 100%;
          .info {
            padding-top: 40rpx;
            padding-left: 30rpx;
            display: flex;
            justify-content: flex-start;
            align-items: center;
            .user {
              margin-right: 48rpx;
              text-align: center;
              .text3 {
                font-size: 26rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(153,153,153,1); 
              }
              .text4 {
                font-size: 36rpx;
                font-family: PingFang SC;
                font-weight: 500;
                color: rgba(254,114,102,1);
                margin-top: 15rpx;
              }
              .sm {
                font-size: 21rpx;
              }
            }
          }
          .btn {
            width: 164rpx;
            height: 50rpx;
            background: linear-gradient(228deg,rgba(253,139,112,1),rgba(254,100,97,1));
            border-radius: 10rpx;
            margin-left: 29rpx;
            margin-top: 27rpx;
            text-align: center;
            line-height: 50rpx;
            font-size: 22rpx;
            font-family: PingFang SC;
            font-weight: 500;
            color: rgba(255,255,255,1);
          }
        }
      }
    }
  }
</style>
